.row {
	@extend %clearfix;
}

[class*='column-'] {
	float: left;
	width: 100%;
	min-height: 1px; // keep its space when no content
	//padding: $grid-gutter; // no padding model
}

@media #{$breakpoint-tablet} {
	@for $i from 1 through $grid-columns {
		.column-#{$i} {
			width: 100% / $grid-columns * $i;
		}
		
		@for $x from 1 through $grid-columns {
			.column-#{$i}-span-#{$x} {
				float: left;
				min-height: 1px; // keep its space when no content
				margin-right: -100%;
				margin-left: 100% / $grid-columns * ($i - 1);
				width: 100% / $grid-columns * $x;
			}
		}
	}
}